<template>
  <template v-for="menu in menuList" :key="menu.meta.path">
    <!-- 无子菜单 -->
    <q-expansion-item
      v-if="!menu.children"
      :icon="menu.meta.icon"
      :label="menu.meta.title"
      :hide-expand-icon="true"
      :to="menu.path"
    >
    </q-expansion-item>
    <!-- 有子菜单且只有一个 -->
    <q-expansion-item
      v-else-if="menu.children && menu.children.length == 1"
      :icon="menu.children[0]?.meta.icon"
      :label="menu.children[0]?.meta.title"
      :hide-expand-icon="true"
      :to="menu.children[0]?.path"
    >
    </q-expansion-item>
    <!-- 多级菜单 -->
    <q-expansion-item
      v-else
      :icon="menu.meta.icon"
      :label="menu.meta.title"
      :content-inset-level="0.4"
      :class="{ 'parent-active': isParentOfActiveRoute(menu) }"
      :default-opened="isParentOfActiveRoute(menu)"
    >
      <MenuListPage :menuList="menu.children" />
    </q-expansion-item>
  </template>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'
import type { AppRouteRecordRaw } from 'src/router/routes'
defineOptions({
  name: 'MenuListPage',
})

const { menuList } = defineProps<{
  menuList: AppRouteRecordRaw[]
}>()

// 当前路由实例
const route = useRoute()

/**
 * 检查函数：递归判断当前菜单项是否为活动路由的父级
 * @param menu 要检查的菜单项
 */
const isParentOfActiveRoute = (menu: AppRouteRecordRaw): boolean => {
  if (!menu.children) {
    return false
  }

  // 递归函数，用于深度遍历
  const check = (items: AppRouteRecordRaw[]): boolean => {
    for (const item of items) {
      // 如果子项的path路径与当前路由路径匹配，则返回 true
      if (item.path && item.path === route.path) {
        return true
      }
      // 如果子项还有子菜单，则继续递归检查
      if (item.children && check(item.children)) {
        return true
      }
    }
    return false
  }

  return check(menu.children)
}
</script>

<style lang="scss">
// 菜单激活项添加样式
.parent-active > .q-expansion-item__container > .q-item {
  color: $primary; /* Quasar 的主色 */
  .q-item__section--avatar {
    color: $primary; /* 图标也变色 */
  }
}
</style>
<style lang="scss" scoped></style>
